import { defineStore } from "pinia";
import { RouteLocationRaw } from "vue-router";
import { router } from "@/router";
import { StoreID } from "@/config";
import { persistedStateConfig } from "@/config";

export const useTabsStore = defineStore(StoreID.TABS_STORE, {
    state: (): TabsState => ({
        tabsMenuList: [],
    }),

    getters: {},

    actions: {
        // Add Tabs
        async addTabs(tabItem: TabsMenu) {
            if (this.tabsMenuList.every((item) => item.path !== tabItem.path)) {
                this.tabsMenuList.push(tabItem);
            }
        },

        // Remove Tabs
        async removeTabs(tabPath: string, isCurrent: boolean = true) {
            const tabsMenuList = this.tabsMenuList;
            if (isCurrent) {
                tabsMenuList.forEach((item, index) => {
                    if (item.path !== tabPath) return;
                    const nextTab = tabsMenuList[index + 1] || tabsMenuList[index - 1];
                    if (!nextTab) return;
                    router.push(nextTab.path as RouteLocationRaw);
                });
            }
            this.tabsMenuList = tabsMenuList.filter((item) => item.path !== tabPath);
        },

        // Close MultipleTab
        async closeMultipleTab(tabsMenuValue?: string) {
            this.tabsMenuList = this.tabsMenuList.filter((item) => {
                return item.path === tabsMenuValue || !item.close;
            });
        },

        // Set Tabs
        async setTabs(tabsMenuList: TabsMenu[]) {
            this.tabsMenuList = tabsMenuList;
        },

        // Set Tabs Title
        async setTabsTitle(title: string) {
            const nowFullPath = location.hash.substring(1);
            this.tabsMenuList.forEach((item) => {
                if (item.path == nowFullPath) item.title = title;
            });
        },
    },

    persist: true,
});
